<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js定时淡出效果</title>
    <style>
        body,ul{ margin:0; padding:0; }
        li { list-style:none; }
        .box{ width: 1000px;height: 50px;background: #14d6e4;  position: relative; margin-top: 400px; margin-left: 100px}
        .box li{ width: 50px;height: 50px;line-height: 50px; text-align: center; position: absolute; top: 0px;}
        p{ position: absolute; top: -200px; left: 0px}
    </style>
    <script src="js/move.js" type="text/javascript"></script>
    <script>
        window.onload=function(){
            var oUl=document.getElementById("list");
            var  oLi=oUl.getElementsByTagName("li");
            for(var i=0;i<17;i++){
                oUl.innerHTML+="<li>+1</li>";
                oLi[i].style.left=i*60+"px";
            }
            var index=0;
            var times0=null;
            abc();
            function abc(){
                clearInterval(times0);
                times0=setInterval(function(){
                    if(index==oLi.length){
                        clearInterval(times0);
                    }else{
                        autoPlay(oLi[index]);
                        index++;
                    }
                },1000)
            }
            /*---透明度---*/
            function clarity(obj,step,fun){
                var num=0;
                clearInterval(obj.clarityTimer);
                obj.clarityTimer= setInterval(function(){
                    var claritys=getStyle(obj,"opacity")-(step/100)*num;
                    if(claritys<=0){
                        clearInterval(obj.clarityTimer);
                        claritys=0;
                    }else{
                        num++;
                    }
                    obj.style.opacity= claritys;
                    obj.style. filter="alpha(opacity="+(claritys*100)+")";
                },50);
            }
            function autoPlay(obj){
                move(obj,"top",12,-200);
                clarity(obj,1)
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <ul id="list">

        </ul>
        <p>------------------------------------------------------------------------------------------------------------------------------------------------</p>
    </div>
</body>
</html>